<!-- yangbuyi Copyright (c) https://yby6.com 2023. -->

<template>
  <view class="u-keyboard" @touchmove.stop.prevent="noop">
    <view
      v-for="(group, i) in abc ? engKeyBoardList : areaList"
      :key="i"
      class="u-keyboard__button"
      :index="i"
      :class="[i + 1 === 4 && 'u-keyboard__button--center']"
    >
      <view v-if="i === 3" class="u-keyboard__button__inner-wrapper">
        <view
          class="u-keyboard__button__inner-wrapper__left"
          hover-class="u-hover-class"
          :hover-stay-time="200"
          @tap="changeCarInputMode"
        >
          <text
            class="u-keyboard__button__inner-wrapper__left__lang"
            :class="[
              !abc && 'u-keyboard__button__inner-wrapper__left__lang--active',
            ]"
            >中</text
          >
          <text class="u-keyboard__button__inner-wrapper__left__line">/</text>
          <text
            class="u-keyboard__button__inner-wrapper__left__lang"
            :class="[
              abc && 'u-keyboard__button__inner-wrapper__left__lang--active',
            ]"
            >英</text
          >
        </view>
      </view>
      <view
        class="u-keyboard__button__inner-wrapper"
        v-for="(item, j) in group"
        :key="j"
      >
        <view
          class="u-keyboard__button__inner-wrapper__inner"
          :hover-stay-time="200"
          @tap="carInputClick(i, j)"
          hover-class="u-hover-class"
        >
          <text class="u-keyboard__button__inner-wrapper__inner__text">{{
            item
          }}</text>
        </view>
      </view>
      <view
        v-if="i === 3"
        @touchstart="backspaceClick"
        @touchend="clearTimer"
        class="u-keyboard__button__inner-wrapper"
      >
        <view
          class="u-keyboard__button__inner-wrapper__right"
          hover-class="u-hover-class"
          :hover-stay-time="200"
        >
          <u-icon size="28" name="backspace" color="#303133"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import props from "./props.js";
/**
 * keyboard 键盘组件
 * @description 此为uView自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
 * @tutorial https://uviewui.com/components/keyboard.html
 * @property {Boolean} random 是否打乱键盘的顺序
 * @event {Function} change 点击键盘触发
 * @event {Function} backspace 点击退格键触发
 * @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
 */
export default {
  name: "u-keyboard",
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data() {
    return {
      // 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
      abc: false,
    };
  },
  computed: {
    areaList() {
      let data = [
        "京",
        "沪",
        "粤",
        "津",
        "冀",
        "豫",
        "云",
        "辽",
        "黑",
        "湘",
        "皖",
        "鲁",
        "苏",
        "浙",
        "赣",
        "鄂",
        "桂",
        "甘",
        "晋",
        "陕",
        "蒙",
        "吉",
        "闽",
        "贵",
        "渝",
        "川",
        "青",
        "琼",
        "宁",
        "挂",
        "藏",
        "港",
        "澳",
        "新",
        "使",
        "学",
      ];
      let tmp = [];
      // 打乱顺序
      if (this.random) data = uni.$u.randomArray(data);
      // 切割成二维数组
      tmp[0] = data.slice(0, 10);
      tmp[1] = data.slice(10, 20);
      tmp[2] = data.slice(20, 30);
      tmp[3] = data.slice(30, 36);
      return tmp;
    },
    engKeyBoardList() {
      let data = [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        0,
        "Q",
        "W",
        "E",
        "R",
        "T",
        "Y",
        "U",
        "I",
        "O",
        "P",
        "A",
        "S",
        "D",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "Z",
        "X",
        "C",
        "V",
        "B",
        "N",
        "M",
      ];
      let tmp = [];
      if (this.random) data = uni.$u.randomArray(data);
      tmp[0] = data.slice(0, 10);
      tmp[1] = data.slice(10, 20);
      tmp[2] = data.slice(20, 30);
      tmp[3] = data.slice(30, 36);
      return tmp;
    },
  },
  methods: {
    // 点击键盘按钮
    carInputClick(i, j) {
      let value = "";
      // 不同模式，获取不同数组的值
      if (this.abc) value = this.engKeyBoardList[i][j];
      else value = this.areaList[i][j];
      // 如果允许自动切换，则将中文状态切换为英文
      if (!this.abc && this.autoChange)
        uni.$u.sleep(200).then(() => (this.abc = true));
      this.$emit("change", value);
    },
    // 修改汽车牌键盘的输入模式，中文|英文
    changeCarInputMode() {
      this.abc = !this.abc;
    },
    // 点击退格键
    backspaceClick() {
      this.$emit("backspace");
      clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
      this.timer = null;
      this.timer = setInterval(() => {
        this.$emit("backspace");
      }, 250);
    },
    clearTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";
$u-car-keyboard-background-color: rgb(224, 228, 230) !default;
$u-car-keyboard-padding: 6px 0 6px !default;
$u-car-keyboard-button-inner-width: 64rpx !default;
$u-car-keyboard-button-inner-background-color: #ffffff !default;
$u-car-keyboard-button-height: 80rpx !default;
$u-car-keyboard-button-inner-box-shadow: 0 1px 0px #999992 !default;
$u-car-keyboard-button-border-radius: 4px !default;
$u-car-keyboard-button-inner-margin: 8rpx 5rpx !default;
$u-car-keyboard-button-text-font-size: 16px !default;
$u-car-keyboard-button-text-color: $u-main-color !default;
$u-car-keyboard-center-inner-margin: 0 4rpx !default;
$u-car-keyboard-special-button-width: 134rpx !default;
$u-car-keyboard-lang-font-size: 16px !default;
$u-car-keyboard-lang-color: $u-main-color !default;
$u-car-keyboard-active-color: $u-primary !default;
$u-car-keyboard-line-font-size: 15px !default;
$u-car-keyboard-line-color: $u-main-color !default;
$u-car-keyboard-line-margin: 0 1px !default;
$u-car-keyboard-u-hover-class-background-color: #bbbcc6 !default;

.u-keyboard {
  @include flex(column);
  justify-content: space-around;
  background-color: $u-car-keyboard-background-color;
  align-items: stretch;
  padding: $u-car-keyboard-padding;

  &__button {
    @include flex;
    justify-content: center;
    flex: 1;
    /* #ifndef APP-NVUE */
    /* #endif */

    &__inner-wrapper {
      box-shadow: $u-car-keyboard-button-inner-box-shadow;
      margin: $u-car-keyboard-button-inner-margin;
      border-radius: $u-car-keyboard-button-border-radius;

      &__inner {
        @include flex;
        justify-content: center;
        align-items: center;
        width: $u-car-keyboard-button-inner-width;
        background-color: $u-car-keyboard-button-inner-background-color;
        height: $u-car-keyboard-button-height;
        border-radius: $u-car-keyboard-button-border-radius;

        &__text {
          font-size: $u-car-keyboard-button-text-font-size;
          color: $u-car-keyboard-button-text-color;
        }
      }

      &__left,
      &__right {
        border-radius: $u-car-keyboard-button-border-radius;
        width: $u-car-keyboard-special-button-width;
        height: $u-car-keyboard-button-height;
        background-color: $u-car-keyboard-u-hover-class-background-color;
        @include flex;
        justify-content: center;
        align-items: center;
        box-shadow: $u-car-keyboard-button-inner-box-shadow;
      }

      &__left {
        &__line {
          font-size: $u-car-keyboard-line-font-size;
          color: $u-car-keyboard-line-color;
          margin: $u-car-keyboard-line-margin;
        }

        &__lang {
          font-size: $u-car-keyboard-lang-font-size;
          color: $u-car-keyboard-lang-color;

          &--active {
            color: $u-car-keyboard-active-color;
          }
        }
      }
    }
  }
}

.u-hover-class {
  background-color: $u-car-keyboard-u-hover-class-background-color;
}
</style>
